<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组的操作</title>
</head>
<body>
<h1>数组操作</h1>
<script src="../js/vue.js"></script>
<!--3.创建Vue语法-->
<div id="app">
    <!-- 数组的方法  java中的叫法push:入栈 pop弹栈
                 push() 	在结尾追加元素
                 pop()	删除最后一个元素
                 shift()	删除第一个元素
                 unshift() 在开头追加元素
                 splice() 替换数组中的数据 !!!!
                 sort()	 数据排序
                 reverse() 数组反转
              -->

    <!--         输入框-->
    输入框: <input type="text" v-model="msg"/><br>
    <span v-for="(value) in array">
				{{value}},
    </span><br>

    <button @click="push">push</button>
    <button @click="pop">pop</button>
    <button @click="shift">shift</button>
    <button @click="unshift">unshift</button>
    <button @click="splice">替换</button>

</div>

<!-- 引入JS文件 -->
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            array: ["a", "b", "c"],
            msg: ''
        },
        methods: {
            push() {
                this.array.push(this.msg)
            },
            pop() {
                //数组数据会自动的更新
                this.array.pop()
            },
            shift() {
                this.array.shift()
            },
            unshift() {
                //在开头中添加
                this.array.unshift(this.msg)
            },

            splice() {
                /**
                 * 参数: 3个参数
                 *        arg1: 操作数据的起始位置 从0开始
                 *        arg2: 操作的数量     阿拉伯数字
                 *        arg3: 替换后的数据.可以有多个(可变参数类型)
                 * 案例:
                 *        1.将第一个元素,替换为msg
                 *            this.array.splice(0,1,this.msg)
                 *        2.将前2个元素替换为msg
                 *            this.array.splice(0,2,this.msg) 前2个替换
                 *            this.array.splice(0,2,this.msg,this.msg) 前2个替换,补齐2个数据
                 *        3.将最后一个替换为msg
                 *            let index = this.array.length - 1;
                 this.array.splice(index,1,this.msg)
                 4.删除第二个元素
                 */
                //如果只有2个参数,则表示删除
                this.array.splice(1, 1)
            }
        }
    })
</script>
</body>
</html>